<!-- @format -->
<script setup>
	import { ref } from 'vue'

	// 分数：一共是4分
	const x = ref(0)
</script>

<template>
	<div class="progress">
		<div
			class="inner"
			:style="{ width: (x / 4) * 100 + '%' }">
			<span>{{ (x / 4) * 100 + '%' }}</span>
		</div>
	</div>
	<button @click="x = 1">设置25%</button>
	<button @click="x = 2">设置50%</button>
	<button @click="x = 3">设置75%</button>
	<button @click="x = 4">设置100%</button>
</template>

<style>
	.progress {
		height: 25px;
		width: 400px;
		border-radius: 15px;
		background-color: #272425;
		border: 3px solid #272425;
		box-sizing: border-box;
		margin-bottom: 30px;
	}
	.inner {
		height: 20px;
		border-radius: 10px;
		text-align: right;
		position: relative;
		background-color: #409eff;
		/* background-size: 20px 20px; */
		box-sizing: border-box;
		transition: all 1s;
	}
	.inner span {
		position: absolute;
		right: -25px;
		bottom: -25px;
	}
</style>
